<template>
  <!-- 项目信息详情 -->
  <div class="app-container-detail">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="small" @click="handleReturn()">返回</el-button>
      </el-col>
    </el-row>
    <!-- form表单 -->
    <div class="main-content">
      <el-card class="box-card" shadow="never">
        <div slot="header">
          <span>项目信息详情</span>
        </div>
        <div class="main-content-body">
          <div class="detail-item">
            <div class="two-level-title">基本信息</div>
            <table class="detail-table" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <span class="labelTitle">项目名称</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.proName }}</span>
                </td>
                <td>
                  <span class="labelTitle">项目代码</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.proCode }}</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">项目编号</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.proNum }}</span>
                </td>
                <td>
                  <span class="labelTitle">建字第号</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.buildManagementNum }}</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">项目等级</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.grade }}</span>
                </td>
                <td>
                  <span class="labelTitle">项目类型</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.proTypeName }}</span>
                </td>
                <td>
                  <span class="labelTitle">项目地址</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.address }}</span>
                </td>
                <!-- <td>
                  <span class="labelTitle">所在区域</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ currentProvince }}</span>
                </td> -->
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">计划时间</span>
                </td>
                <td colspan="3">
                  <span class="infoText">{{ formData.startTime }} - {{ formData.endTime }}</span>
                </td>
                <td colspan="4"></td>
              </tr>
              <tr>
                <td>
                  <span class="labelTitle" v-html="`备&emsp;&emsp;注`" />
                </td>
                <td colspan="7">
                  <span class="infoText">{{ formData.remark }}</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
/** 页面接口 start*/
import { listByTreeProcessType } from '@/api/common/area.js'
/** 页面接口 end*/
import { mapState } from 'vuex'
/** 页面组件 end*/
export default {
  components: {
  },
  data() {
    return {
      // 全部
      readOnly: true,
      currentProvince: [],
      formData: {
        proName: '', // 项目名称
        proCode: '', // 项目代码
        proNum: '', // 项目编号
        buildManagementNum: '', // 建字第号
        grade: '', // 项目等级
        address: '', // 项目地址
        startTime: '', // 计划开始时间
        endTime: '', //  计划结束时间
        remark: '' // 备注
      }
    }
  },
  computed: {
    ...mapState({
      proGrade: state => state.basicInfo.proGrade, // 项目等级
      proId: state => state.basicInfo.proId // 项目id
    })
  },
  mounted() {
    this.handleUpdate(this.$route.params.row)
    // 勘探点列表
    this.getRegionTree()
  },
  methods: {
    // 获取区域树
    async getRegionTree() {
      const { data: { rows }} = await listByTreeProcessType({ regionCode: '' })
      this.cityOptions = this.deleteChildren(rows)
      this.getRegionCode()
    },
    // 根据地区编码回显地区
    getRegionCode() {
      const { formData: { province, city, county }} = this
      if (!county) return
      const region = this.cityOptions[0].children.find(item => {
        return item.children && item.children.some(city => city.value === province)
      })
      const sheng = region.children.find(sheng => sheng.value === province)
      const shi = sheng.children.find(shi => shi.value === city)
      const xian = shi.children.find(xian => xian.value === county)
      this.currentProvince = (region.label + sheng.label + shi.label + xian.label) || ''
    },
    // 项目等级翻译
    formatproGrade(proGrade) {
      return this.selectDictLabel(this.proGrade, proGrade)
    },
    // 查询项目立项的详情
    handleUpdate(data) {
      this.formData = { ...data }
      // 项目等级
      this.formData.grade = this.formatproGrade(data.grade)
    },
    /** 单位信息 end*/
    // 返回
    handleReturn() {
      this.$router.go(-1)
    }
  }

}
</script>

<style lang="scss">
</style>

